<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="box1" id="box1">hello</div>
    <div class="box2" id="box2">world</div>
</body>
<script src="./jquery.js"></script>
<script src="../public.js"></script>
<script>
    
    // const obox1 = $$(".box1");
    // obox1.css("background","pink");

    // const obox2 = $(".box2");
    // obox2.css("background","green");

    // console.log(randomColor());

    // function $$(name){
    //     const ele = document.querySelector(name);
    //     ele.css = function(key,val){
    //         ele.style[key] = val;
    //     }
    //     return ele;
    // }

    // const obox1 = document.querySelector("#box1");
    // console.log(obox1);
    // obox1.style.background = "red"
    // obox1.css("background","pink");
    // $(obox1).css("background","pink");
    
    // const obox2 = $("#box2");
    // console.log(obox2);
    // obox2.css("background","pink")
    // obox2.style.background = "yellow";
    // obox2[0].style.background = "yellow";
    // obox2.get(0).style.background = "yellow";
    

</script>
</html>